<template>
  <div
    :class="['out-line', isMove ? 'mouse' : '']"
    :style="{
      width: width + 'px',
      height: height ? height + 'px' : 'auto',
      minHeight: minHeight + 'px',
      padding: padding + 'px',
    }"
    @mousedown="mousedown"
    ref="moveRef"
  >
    <div class="close" @click="closeLayer" v-if="closeStatus">
      <a-icon type="close" />
    </div>
    <div class="line"></div>
    <slot></slot>
  </div>
</template>
<script>
  import {mapActions} from 'vuex'

  export default {
  props: {
    // 宽高数据
    width: {
      type: Number,
      default: 240,
    },
    height: {
      type: Number,
      default: 550,
    },
    minHeight: {
      type: Number,
      default: 0,
    },
    padding: {
      type: Number,
      default: 15,
    },
    closeStatus: {
      type: Boolean,
      default: true,
    },
    //是否可移动
    move: {
      type: Boolean,
      default: true,
    },
    id: {
      type: String,
      default: '',
    },
    position: {
      type: Object,
      default: () => {},
    },
    search: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isMove: false, //是否具备移动的条件 鼠标按下才可移动
      moveing: false, //移动中才能出发  校验是点击还是拖动
      left: 0,
      top: 0,
    }
  },
  methods: {
    ...mapActions(['setZIndex']),
    //置顶
    toTop() {
      if (!this.move) return
      this.setZIndex(this.id)
    },
    //鼠标按下
    mousedown(event) {
      const _this = this
      if (!this.move) return
      this.setZIndex(this.id)
      let t_clientX = event.clientX || event.touches[0].clientX
      let t_clientY = event.clientY || event.touches[0].clientY
      this.isMove = true
      let leftPosition = 0,
        topPosition = 0
      document.onmousemove = (ev) => {
        if (!_this.isMove) return
        _this.moveing = true;
        const moveX = ev.clientX - t_clientX
        const moveY = ev.clientY - t_clientY
        const left = _this.left + moveX <= 0 ? 0 : _this.left + moveX
        const top = _this.top + moveY <= 0 ? 0 : _this.top + moveY
        _this.$refs.moveRef.style.left = left + 'px'
        _this.$refs.moveRef.style.top = top + 'px'
        leftPosition = left
        topPosition = top
      }
      document.onmouseup = () => {
        _this.isMove = false
        if(!_this.moveing) return;
        _this.moveing = false;
        _this.setZIndex('')
        _this.left = leftPosition
        _this.top = topPosition
        document.onmousemove = () => {}
        document.onmouseup = () => {}
      }
    },
    //关闭图层
    closeLayer() {
      this.$emit('closeLayer')
    },
  },
  mounted() {
    if (this.position) {
      this.$refs.moveRef.style.left = this.position.left
      this.$refs.moveRef.style.top = this.position.top
      this.top = parseFloat(this.position.top.replace(/px/gi, ''))
      this.left = parseFloat(this.position.left.replace(/px/gi, ''))
    }
  },
}
</script>
<style lang="less" scoped>
.out-line {
  position: relative;
  border: 1px solid rgba(2, 224, 247, 0.5);
  background: rgba(19, 28, 50, 0.8);
  .close {
    position: absolute;
    width: 17px;
    height: 17px;
    background: rgba(19, 28, 50, 0.8);
    top: -24px;
    right: 0;
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    cursor: pointer;
  }
  .line {
    width: 100%;
    height: 8px;
    background: #1990fd;
  }
}
.mouse {
  cursor: move;
}
</style>